<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html" %>
<%@ taglib prefix="bean" uri="http://struts.apache.org/tags-bean" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>

<script type="text/javascript" src="<c:url value='/js/includes/prototype.js'/>"></script>
<script type="text/javascript"
        src="<c:url value='/js/scriptaculous/scriptaculous.js?load=builder,effects'/>"></script>
<script type="text/javascript" src="<c:url value='/js/includes/modalbox.js'/>"></script>
<script type="text/javascript" src="<c:url value='/js/springxt.js'/>"></script>

<style type="text/css">@import url( "<c:url value='/css/modalbox.css'/>" );</style>

<html:form action="/transaction">
    <table width="100%">
        <tr>
            <td align="center">
                <html:submit property="submittedValue" styleClass="transbutton1">
                    <bean:message key="add.transaction.button.add"/>
                </html:submit>
            </td>
        </tr>
        <tr>
            <td>
                <html:select property="employee" name="transaction" size="5" onclick="XT.doAjaxAction('load', this);"
                             styleId="employees">
                    <html:optionsCollection property="employees" label="label" value="value"/>
                </html:select>
            </td>
        </tr>
        <tr>
            <td>
                <bean:message key="add.transaction.service.lookup"/>
                <input type="text" id="searchService" name="searchService" value=""/>
            </td>
        </tr>
        <tr>
            <td>
                <html:select property="selectedService" name="transaction" size="5" styleId="services">
                    <html:optionsCollection property="services" label="label" value="value"/>
                </html:select>
            </td>
        </tr>
        <tr>
            <td>
                <bean:message key="add.transaction.product.lookup"/>
                <input type="text" id="searchProduct" name="searchProduct" value=""/>
            </td>
        </tr>
        <tr>
            <td>
                <html:select property="selectedProduct" name="transaction" size="5" styleId="products">                    
                    <html:optionsCollection property="products" label="label" value="value"/>
                </html:select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" onclick="goToGiftcard(this)" value="<bean:message key='modal.add.transaction.payment.giftcard'/>" class="transbutton">
            </td>
        </tr>
    </table>
</html:form>
<script type="text/javascript">
    function goToGiftcard(button) {
        Modalbox.show("<c:url value='/gotogiftcard.do'/>" + '?rnd=' + Math.random() * 99999, {title: button.value, width: 400});
    }

    var searchService = $("searchService");
    searchService.onkeyup = function() {
        var selectEmployee = $("employees");
        if (selectEmployee.selectedIndex > -1) {
            XT.doAjaxAction("autocompleteService", this, {employeeId: selectEmployee.options[selectEmployee.selectedIndex].value, service:this.value});
        } else {
            alert("Please, select an employee.");
        }
    }

    searchService.onblur = function() {
        this.value = "";
    }

    var searchProduct = $("searchProduct");
    searchProduct.onkeyup = function() {
        var selectEmployee = $("employees");
        if (selectEmployee.selectedIndex > -1) {
            XT.doAjaxAction("autocompleteProduct", this, {employeeId: selectEmployee.options[selectEmployee.selectedIndex].value, product :this.value});
        } else {
            alert("Please, select an employee.");
        }
    }
    searchProduct.onblur = function() {
        this.value = "";
    }
</script>

